<template>
  <page-header-wrapper :class="notOrder ? 'not-order' : ''" :title="false">
    <a-spin size="large" :spinning="mainLoading">
      <a-card :bordered="false">
        <div slot="title">
          <a-row :gutter="10" :style="{ height: '40px', lineHeight: '40px' }">
            <a-col :span="16">
              <a-row type="flex" justify="start">
                <a-col :span="3">今日工作内容</a-col>
                <a-col :span="4">
                  <div class="l-adviser-comeon">
                    <span @click="$router.push({ name: 'AllCalls' })">
                      今日通次 <a>{{ callData.today_call_num }}(次)</a><br>
                      今日通时 <a>{{ Math.floor(callData.today_call_duration/60) }}(分)</a>
                    </span>
                  </div>
                </a-col>
              </a-row>
            </a-col>
            <a-col :span="2">
              <a-button size="small" block type="danger" icon="plus" @click="addModal">添加客户</a-button>
            </a-col>
            <a-col :span="1">
              <a-button size="small" block type="danger" @click="onReload">重载</a-button>
            </a-col>
            <a-col :span="1">
              <a-button size="small" block type="danger" @click="$router.push({ name: 'Wechat' })">微信</a-button>
            </a-col>
            <a-col :span="1">
              <a-button size="small" block type="danger" @click="iask">提问</a-button>
            </a-col>
            <a-col :span="3">
              <a-button size="large" block type="danger" @click="sosModal">SOS 3天未开单</a-button>
            </a-col>
          </a-row>
        </div>
        <a-row type="flex" justify="space-between">
          <a-col flex="215px">
            <a-spin :spinning="countLoading">
              <div class="l-work-item" :class="countData.not_contact_customer_count != 0 ? 'undone' : 'done'" data-modules="1" @click="handleModulesTabs">
                <div class="title">{{ countData.not_contact_customer_count }}</div>
                <a-progress :percent="50" strokeColor="#fff" :show-info="false" />
                <a-row>
                  <a-col :span="12">超时未联系</a-col>
                  <!--                  <a-col :span="12" :style="{ textAlign: 'right' }">已完成10条</a-col>-->
                </a-row>
              </div>
            </a-spin>
          </a-col>
          <a-col flex="215px">
            <a-spin :spinning="countLoading">
              <div class="l-work-item" :class="countData.unread_business_count != 0 ? 'undone' : 'done'" data-modules="3" @click="handleModulesTabs">
                <div class="title">{{ countData.unread_business_count }}</div>
                <a-progress :percent="50" strokeColor="#fff" :show-info="false" />
                <a-row>
                  <a-col :span="12">业务更新通知</a-col>
                  <!--                  <a-col :span="12" :style="{ textAlign: 'right' }">已完成10条</a-col>-->
                </a-row>
              </div>
            </a-spin>
          </a-col>
          <a-col flex="215px">
            <a-spin :spinning="countLoading">
              <div class="l-work-item" :class="countData.old_customer_count != 0 ? 'undone' : 'done'" data-modules="4" @click="handleModulesTabs">
                <div class="title">{{ countData.old_customer_count }}</div>
                <a-progress :percent="50" strokeColor="#fff" :show-info="false" />
                <a-row>
                  <a-col :span="12">老客户未回访</a-col>
                  <!--                  <a-col :span="12" :style="{ textAlign: 'right' }">已完成10条</a-col>-->
                </a-row>
              </div>
            </a-spin>
          </a-col>
          <a-col flex="215px">
            <a-spin :spinning="countLoading">
              <div class="l-work-item" :class="done" data-modules="2" @click="handleModulesTabs">
                <div class="title">***</div>
                <a-progress :percent="50" strokeColor="#fff" :show-info="false" />
                <a-row>
                  <a-col :span="12">可领新资源</a-col>
                  <!--                  <a-col :span="12" :style="{ textAlign: 'right' }">已完成5条</a-col>-->
                </a-row>
              </div>
            </a-spin>
          </a-col>
          <a-col flex="215px">
            <a-spin :spinning="countLoading">
              <div class="l-work-item" :class="done" data-modules="5" @click="handleModulesTabs">
                <div class="title">***</div>
                <a-progress :percent="50" strokeColor="#fff" :show-info="false" />
                <a-row>
                  <a-col :span="12">资源加油站</a-col>
                  <!--                  <a-col :span="12" :style="{ textAlign: 'right' }">已完成10条</a-col>-->
                </a-row>
              </div>
            </a-spin>
          </a-col>
          <a-col flex="215px">
            <a-spin :spinning="countLoading">
              <div class="l-work-item" :class="done" data-modules="6" @click="handleModulesTabs">
                <div class="title">***</div>
                <a-progress :percent="0" strokeColor="#fff" :show-info="false" />
                <a-row>
                  <a-col :span="12">热资源</a-col>
                  <!--                  <a-col :span="12" :style="{ textAlign: 'right' }">已完成10条</a-col>-->
                </a-row>
              </div>
            </a-spin>
          </a-col>
          <a-col flex="215px">
            <a-card :bordered="false" :loading="countLoading">
              <div slot="cover" class="l-work-item l-work-item2 border">
                <div>
                  <a-row :gutter="[0,5]">
                    <a-col :span="24"><b :style="{ fontSize: '16px' }">我的数据</b></a-col>
                    <a-col :span="24" :style="{ fontSize: '14px' }">业绩排名 <a-tag color="red" :style="{ marginLeft: '10px', cursor: 'pointer' }" @click="onStateModal('1')">{{ countData.ranking }}</a-tag></a-col>
                    <a-col :span="24" :style="{ fontSize: '14px' }">领新排名 <a-tag color="red" :style="{ marginLeft: '10px', cursor: 'pointer' }" @click="onStateModal('2')">{{ countData.this_month_lx_count }}</a-tag></a-col>
                    <a-col :span="24" :style="{ fontSize: '14px' }">当前业绩 <a-tag color="red" :style="{ marginLeft: '10px', cursor: 'pointer' }" @click="onStateModal('3')">{{ countData.this_month_yj }}</a-tag></a-col>
                  </a-row>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </a-card>
      <timeout-customer v-if="cardModules == 1"></timeout-customer>
      <business-update v-if="cardModules == 3"></business-update>
      <paid-customer v-if="cardModules == 4"></paid-customer>
    </a-spin>
    <a-modal
      v-model="sosVisible"
      width="800px"
    >
      <div slot="footer">
        <div :style="{ fontSize: '26px', textAlign: 'center', color: '#f36a5a' }">
          加油，加油！相信自己！300通电话打起来
        </div>
      </div>
      <h2 :style="{ textAlign: 'center' }">小伙伴已经<span :style="{ fontSize: '40px', color: '#f36a5a' }">3</span>天未开单了，加油！</h2>
      <h4 :style="{ fontSize: '16px', textAlign: 'center' }">电话量、微信量、合同量均是开单的 重要指数</h4>
      <a-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
      >
        <a-textarea
          v-model="form.content"
          :rows="4"
          :style="{ resize: 'none' }"
          placeholder="说明未开单原因"
        />
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="onSubmitSos" :loading="loading">提交，求教！</a-button>
          </a-col>
        </a-row>
      </a-form-model>
      <div>
        <p :style="{ color: '#000' }">近10天通话记录:</p>
        <a-table
          :columns="sosList"
        >
        </a-table>
      </div>
    </a-modal>
    <a-modal
      centered
      title="添加客户资源"
      v-model="addVisible"
      :width="600"
      @ok="onAddCustomer"
    >
      <a-form-model
        ref="addForm"
        :model="addCustomerForm"
        :rules="addRules"
      >
        <a-row :gutter="40">
          <a-col :span="12">
            <a-form-model-item label="客户来源" prop="source">
              <a-select disabled v-model="addCustomerForm.source">
                <a-select-option v-for="(item,index) in sourceOpts" :key="index" :value="index">{{ item }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户姓名" prop="customer_name">
              <a-input v-model="addCustomerForm.customer_name" type="text" placeholder="输入客户姓名" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="状态标记" prop="customer_status">
              <a-select v-model="addCustomerForm.customer_status">
                <a-select-option v-for="(item,index) in statusOpts" :key="index" :value="index">{{ item }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系电话1" prop="phone">
              <a-input v-model="addCustomerForm.phone" type="text" placeholder="输入联系电话" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="注册名称" prop="tm_name">
              <a-input v-model="addCustomerForm.tm_name" type="text" placeholder="输入商标名称/专利名称/其他" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="联系电话2">
              <a-input v-model="addCustomerForm.phone2" type="text" placeholder="输入联系电话" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="申请主体" prop="subject_of_application">
              <a-input v-model="addCustomerForm.subject_of_application" type="text" placeholder="输入申请主体" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="客户微信" prop="wechat">
              <a-input v-model="addCustomerForm.wechat" type="text" placeholder="请输入客户微信号" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="行业">
              <a-input v-model="addCustomerForm.industry" type="text" placeholder="请输入客户所属行业" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="邮箱">
              <a-input v-model="addCustomerForm.email" type="text" placeholder="请输入客户邮箱" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="备注" prop="notes">
              <a-textarea v-model="addCustomerForm.notes" :rows="4"></a-textarea>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
    <state v-if="stateVisible" :state-type="stateType" @cancel="onStateCancel"></state>
    <call-phone :type="receiveType" v-if="customerVisible" @cancel="handleExit"></call-phone>
    <add v-if="bbsVisible" @cancel="onCancel"></add>
  </page-header-wrapper>
</template>

<script>
import { mapGetters } from 'vuex'
import { Carousel } from 'ant-design-vue'
import { Ellipsis, CallPhone } from '@/components'
import { BusinessUpdate, PaidCustomer, TimeoutCustomer, State } from './components'
import Add from '@/views/bbs/components/Add'
import { getData } from '@/api/adviser'
import { getCallNum, onReload } from '@/api/common'
import col from '@/columns/adviser'
import { getAddCustomer, postAddCustomer } from '@/api/customer'
const sosList = col.sos

export default {
  name: 'Support',
  components: {
    Carousel,
    Ellipsis,
    CallPhone,
    BusinessUpdate,
    PaidCustomer,
    TimeoutCustomer,
    State,
    Add
  },
  data () {
    return {
      sosList,
      loading: false,
      mainLoading: false,
      paidData: [],
      contractData: [],
      // contractData: [],
      businessData: [],
      tableLoading: true,
      cardModules: '',
      // sos
      sosVisible: false,
      customerVisible: false,
      rules: {
        content: [
          { required: true, message: '必须输入未开单原因', trigger: 'blur' }
        ]
      },
      form: {
        name: ''
      },
      // 完成,未完成 class
      undone: 'undone',
      done: 'done',
      // 拨打电话 modal
      visible: false,
      receiveType: '',
      countLoading: true,
      countData: {},
      callData: {},
      callVisible: false,
      intervalId: 0,
      stateType: '1',
      stateVisible: false,
      notOrder: true,
      addVisible: false,
      addCustomerForm: {},
      addRules: {
        customer_name: [ { required: true, message: '请输入客户姓名', trigger: 'blur' } ],
        source: [ { required: true, message: '请选择客户来源', trigger: 'change' } ],
        customer_status: [ { required: true, message: '选择标记状态', trigger: 'change' } ],
        phone: [
          { required: true, message: '请输入客户联系电话', trigger: 'blur' },
          { pattern: /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        subject_of_application: [ { required: true, message: '请输入申请主体', trigger: 'blur' } ],
        tm_name: [ { required: true, message: '请输入注册名称', trigger: 'blur' } ],
        wechat: [ { required: true, message: '请输入微信号', trigger: 'blur' } ]
      },
      statusOpts: {},
      intentionOpts: {},
      sourceOpts: {},
      bbsVisible: false
    }
  },
  created () {
    this.cardModules = ''
    this.getIndexData()
    if (this.bg === 0) {
      this.notOrder = true
    } else {
      this.notOrder = false
    }
  },
  computed: {
    ...mapGetters(['bg'])
  },
  methods: {
    getNums () {
      const app = this
      app.callVisible = true
      getCallNum().then(res => {
        if (res.status === 0) {
          app.callData = res.result
          app.callVisible = false
        }
      })
    },
    customerMove () {
      this.$confirm({
        centered: true,
        title: '警告',
        content: '是否转移客户'
      })
    },
    onStateModal (state) {
      this.stateType = state
      this.stateVisible = true
    },
    onStateCancel (visible) {
      this.stateVisible = visible
    },
    sos () {
      this.sosVisible = true
    },
    /**
     * 1: 三天未开单
     * 2: 新资源库
     * 3: 业务更新
     * 4: 老客户超时未联系
     * 5: 共享库资源
     * 6: 团队任务
     */
    handleModulesTabs (e) {
      const app = this
      const modules = e.currentTarget.dataset.modules
      app.tableLoading = true
      // 其他
      if (modules === '1' || modules === '3' || modules === '4') {
        app.cardModules = modules
      }
      // 新资源库
      if (modules === '2') {
        app.receiveType = 'sh_new'
        app.customerVisible = true
        // if (app.countData.not_contact_customer_count === '0') {
        //   app.receiveType = 'new'
        //   app.customerVisible = true
        // } else {
        //   app.$warning({
        //     title: '您没有清零超时未联系客户'
        //   })
        // }
      }
      // 共享库
      if (modules === '5') {
        app.receiveType = 'old'
        app.customerVisible = true
        // if (app.countData.old_customer_count === '0') {
        //   app.receiveType = 'old'
        //   app.customerVisible = true
        // } else {
        //   app.$warning({
        //     title: '您没有清零老客户回访'
        //   })
        // }
      }
      // 团队任务
      if (modules === '6') {
        // this.visible = true
        this.$warning({
          content: '模块开发中'
        })
      }
    },
    sosModal () {
      this.sosVisible = true
    },
    onSubmitSos () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true
          setTimeout(() => {
            this.sosVisible = false
            this.form.content = ''
            this.loading = false
          }, 1000)
        } else {
          return false
        }
      })
    },
    iask () {
      this.bbsVisible = true
    },
    handleExit (visible) {
      this.customerVisible = visible
    },
    getIndexData () {
      const app = this
      getData().then(res => {
        if (res.status === 0) {
          app.countData = res.result
          app.getNums()
          app.countLoading = false
        }
      })
    },
    onReload () {
      const app = this
      app.$confirm({
        title: '警告',
        content: '重载数据过程较长，不易频繁使用，此过程无法操作系统',
        onOk: () => {
          app.mainLoading = true
          onReload().finally(() => {
            app.mainLoading = false
          })
        }
      })
    },
    addModal () {
      const app = this
      app.addCustomerForm = {}
      getAddCustomer().then(res => {
        if (res.status === 0) {
          app.sourceOpts = res.result.source_opts
          app.intentionOpts = res.result.intention_opts
          app.statusOpts = res.result.customer_status_opts
          app.addCustomerForm = res.result.customer
          app.addVisible = true
        } else {
          app.$warning({
            title: res.msg
          })
        }
      })
    },
    onCancel (visible) {
      this.visible = visible
    },
    onAddCustomer () {
      const app = this
      app.$refs.addForm.validate(valid => {
        if (valid) {
          const form = {}
          for (const k in app.addCustomerForm) {
            form['customer[' + k + ']'] = app.addCustomerForm[k]
          }
          postAddCustomer(form).then(res => {
            if (res.status === 0) {
              app.$confirm({
                title: '客户已添加完成，等待组长审核',
                onOk: () => {
                  app.addVisible = false
                }
              })
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.l-adviser-comeon {
  padding-left: 40px;
  background: url('../../assets/images/adviser/gb.png') left center no-repeat;
  line-height:20px;
  font-size: 12px;
}
.l-work-item{
  padding: 10px 20px;
  height: 130px;
  color: #fff;
  cursor: pointer;
}
.l-work-item2 {
  cursor: default;
}
.l-work-item.border {
  border: 1px solid #eee;
  color: rgba(0, 0, 0, 0.65);
}
.l-work-item .title {
  font-size: 30px;
  font-weight: 400;
  margin-bottom: 10px;
}
.undone {
  background: #f36a5a;
}
.done {
  background: #88b665;
}
.not-order {
  padding-bottom: 20px;
  background: #f00;
}
</style>
